﻿@{
    ViewBag.Title = "MenuSetting";
}
@model WSS.Models.Xt.XT_CDB

@section css
{
    <link href="@Href("~/Content/normalize.css")" rel="stylesheet" />
    <style>
        body
        {
            background-color: white;
        }

        .form-group div
        {
            width: 24px;
            height: 24px;
            float: left;
            margin: 5px;
            cursor: pointer;
        }

        #nav li
        {
            list-style: none;
        }
    </style>
}
<div class="container">
    <form role="form">
        @Html.Hidden("CD_ID")
        @Html.Hidden("CD_LEVEL")
        <div>
            <label for="cd_icon">
                图标 （可以在官网找<a href="http://v3.bootcss.com/components/#glyphicons" target="_blank">bootstarp icon</a>
                也可以在这里找
                <a href="http://www.bootcss.com/p/font-awesome/#icons-web-app" target="_blank">font-awesome icon</a>）
            </label>
            <input type="text" class="form-control" id="cd_icon" value="@Model.CD_ICON">
        </div>
        <label>图标背景色</label>
        <div id="cd_bkcolor" class="form-group" style="height: 24px;">
            <div class="bg-bright"></div>
            <div class="bg-danger"></div>
            <div class="bg-dark"></div>
            <div class="bg-facebook"></div>
            <div class="bg-google-plus"></div>
            <div class="bg-info"></div>
            <div class="bg-orange"></div>
            <div class="bg-primary"></div>
            <div class="bg-primary-light"></div>
            <div class="bg-reverse"></div>
            <div class="bg-success"></div>
            <div class="bg-twitter"></div>
            <div class="bg-violet"></div>
            <div class="bg-warning"></div>
        </div>

        <label>效果</label>
        <div>
            <ul id="nav" data-icon="@Model.CD_ICON" data-bgc="@Model.CD_BKCOLOR">
                <li data-menuid="1007" data-url="//">
                    <a href="#">
                        <i class="@Model.CD_ICON @Model.CD_BKCOLOR"></i>
                        <span>@Model.CD_MC</span>
                    </a>
                </li>
            </ul>
        </div>
        <div>
            @Html.MyLabel("本设置只针对一级菜单", "warning")
            <small>关于图标样式，对于font-awesome,请将 icon-xx 改为 fa fa-xx，原网站为 bootstrap2.x 的图标样式，本系统为 bootstrap3.x</small>
        </div>
    </form>
</div>


@section script
{
    <script type="text/javascript">
        $(function () {
            $("#cd_icon").blur(function () {
                if (this.value) {
                    var oldicon = $("#nav").data("icon");
                    $("#nav").data("icon", this.value);
                    $("#nav i").removeClass(oldicon).addClass(this.value);
                }
            });

            $("#cd_bkcolor > div").click(function () {
                var oldbgc = $("#nav").data("bgc");
                var cls = $(this).attr("class");

                !$("#nav i").hasClass("icon-bg") && $("#nav i").addClass("icon-bg");

                $("#nav i").removeClass(oldbgc).addClass(cls);

                cls = "icon-bg " + cls;
                $("#nav").data("bgc", cls);
            });
        });

        function saveResult() {

            if ($("#CD_LEVEL").val() != 0) {
                mainfn.msg("只能为一级菜单配置样式，二级菜单只能为固定样式");
                return;
            }
            var obj = {
                cd_icon: $("#nav").data("icon"),
                cd_bkcolor: $("#nav").data("bgc"),
                cd_id: '@Model.CD_ID'
            };

            $.post("/xt/savesetting", obj, function (data) {
                mainfn.msg(data.msg);
            });
        }
    </script>
}
